<template>
  <div
    class='app-container'>
    <div class='layout-content'>
      <keep-alive v-if='$route.meta.keepAlive'>
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>
    </div>
    <div class='layout-footer'>
      <TabBar :data='tabbars' @change='handleChange' ref='footer' />
    </div>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import MessagePng from '@/assets/img/home/message.png'
import Vote from '@/assets/img/home/vote.png'
import Live from '@/assets/img/home/live.png'
import Hot from '@/assets/img/home/hot.png'
import MessagePngOn from '@/assets/img/home/资源1.png'
import VoteOn from '@/assets/img/home/资源2.png'
import LiveOn from '@/assets/img/home/资源3.png'
import HotOn from '@/assets/img/home/资源4.png'
import { mapGetters } from 'vuex'

export default {
  name: 'AppLayout',
  data() {
    return {
      tabbars: [
        {
          title: '资讯',
          to: {
            name: 'Home'
          },
          icon: MessagePng,
          icon2: MessagePngOn
        },
        {
          title: '投票',
          to: {
            name: 'Voting'
          },
          icon: Vote,
          icon2: VoteOn
        },
        {
          title: '直播',
          to: {
            name: 'Live'
          },
          icon: Live,
          icon2: LiveOn
        },
        {
          title: '榜单',
          to: {
            name: 'ranking'
          },
          icon: Hot,
          icon2: HotOn
        }
      ]
    }
  },
  components: {
    TabBar
  },
  computed: {
    ...mapGetters([
      'tabBarHeight'
    ])
  },
  methods: {
    handleChange(v) {
      console.log('tab value:', v)
    }
  }
}
</script>
<style>
  .layout-footer .van-tabbar, .layout-footer.van-nav-bar{
        max-width: 100%;
        margin: 0 auto;
        left: 0;
        margin-left:0;
  }
</style>
